<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body {
				background-image: url(../全选/img/460827e5-7c39-40a4-bb8d-677b33102742_420x531_90.jpg);
			}
			
			.box {
				width: 100px;
				height: 100px;
				border-radius: 50%;
				background-color: blanchedalmond;
				position: absolute;
				top: 0;
				left: 0;
			}
		</style>
	</head>

	<body>

		<script type="text/javascript">
//			setInterval(function() {
//				var div = document.createAttribute("div")
//				div.className = "box";
//				div.setAttribute("data-vx", Math.random() * 15 + 5);
//				div.setAttribute("data-vy", Math.random() * 15 + 5);
//				document.body.appendChild(div);
//			}, 1000);

			setInterval(function() {
				var bodyHeight = document.documentElement.clientHeight;
				var bodyWidth = document.documentElement.clientWidth;

				var divs = document.getElementsByTagName("div");
				for(var i = 0; i < divs.length; i++) {
					var vx = divs[i].getAttribute("data-vx") * 1;
					var vy = divs[i].getAttribute("data-vy") * 1;
					var t = parseInt(divs[i].style.top);
					var l = parseInt(divs[i].style.left);
					//获取style标签以及内联样式表中的样式属性
					//var t = getStyle(divs[i],'top');
					t = t ? t : 0;
					l = l ? l : 0;

					if(t > bodyHeight - 105 - Math.abs(vy) || t < 0) {
						//改变方向

						vy = -vy;
						divs[i].setAttribute("data-vy", vy);
						var r = parseInt(Math.random() * 256);
						var g = parseInt(Math.random() * 256);
						var b = parseInt(Math.random() * 256);
						var color = "rgba(" + r + "," + g + "," + b + ",0.6)";

						divs[i].style.backgroundColor = color;
					}
					if(l > bodyWidth - 105 - Math.abs(vx) || l < 0) {
						vx = -vx;
						divs[i].setAttribute("data-vx", vx)
						var r = parseInt(Math.random() * 256);
						var g = parseInt(Math.random() * 256);
						var b = parseInt(Math.random() * 256);
						var color = "rgba(" + r + "," + g + "," + b + ",0.6)";

						divs[i].style.backgroundColor = color;
					}

					l += vx;
					t += vy;

					divs[i].style.left = l + "px";
					divs[i].style.top = t + "px";
				}
			}, 30);

			function getStyle(obj, attrs) {
				return obj.currentStyle ? obj.currentStyle[attrs] : getComputedStyle(obj, null)[attrs];
			}
		</script>
	</body>

</html>